import { PlusCircleOutlined } from '@ant-design/icons'
import { Button, Card, DatePicker, Divider, Input, Select, SelectProps, Space, Table } from 'antd'
import React from 'react'
import styles from './index.less'

const options: SelectProps['options'] = []

for (let i = 10; i < 36; i++) {
  options.push({
    value: i.toString(36) + i,
    label: i.toString(36) + i,
  })
}

const handleChange = (value: string) => {
  console.log(`selected ${value}`)
}
const { RangePicker } = DatePicker

const dataSource = [
  {
    key: '1',
    id: '193',
    name: '小明',
    numberViews: 99,
    numberCollections: 99,
  },
  {
    key: '2',
    id: '193',
    name: '小明',
    numberViews: 99,
    numberCollections: 99,
  },
  {
    key: '3',
    id: '193',
    name: '小明',
    numberViews: 99,
    numberCollections: 99,
  },
  {
    key: '4',
    id: '193',
    name: '小明',
    numberViews: 99,
    numberCollections: 99,
  },
]

const columns = [
  //   {
  //     title: '序号',
  //     render: (text, record, index) => `${index + 1}`,
  //   },
  {
    title: '作品名ID',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '浏览次数',
    dataIndex: 'numberViews',
    key: 'numberViews',
  },
  {
    title: '收藏人数',
    dataIndex: 'numberCollections',
    key: 'numberCollections',
  },
  {
    title: '操作',
    key: 'action',
    render: (_, record) => (
      <Space size="middle">
        <a style={{ color: '#000000' }}>编辑</a>
        <a style={{ color: '#000000' }}>删除</a>
      </Space>
    ),
  },
]

class ThemeStyle extends React.Component {
  getRowClassName = (record, index) => {
    let className = ''
    className = index % 2 === 0 ? styles.oddRow : styles.evenRow
    return className
  }

  render() {
    return (
      <div className={styles.content}>
        <Card>
          <Button
            type="primary"
            icon={<PlusCircleOutlined style={{ marginRight: '-3px' }} />}
            style={{ width: '98px', height: '32px', fontSize: '14px', marginRight: '18px' }}
          >
            创建作品
          </Button>
          <Input placeholder="搜索图片名称" style={{ width: '140px', height: '32px', marginRight: '18px' }} />
          <Select
            mode="tags"
            style={{ width: '140px', height: '32px', marginRight: '18px' }}
            placeholder="未鉴定标签"
            onChange={handleChange}
            options={options}
          />
          <RangePicker style={{ marginRight: '18px' }} />
          <Button type="primary">搜索</Button>

          <Divider />
          <Table
            dataSource={dataSource}
            columns={columns}
            rowClassName={this.getRowClassName}
            pagination={{
              showTotal: () => `共 80 条`,
              total: 80,
              current: 1,
              showSizeChanger: true,
              showQuickJumper: true,
              defaultPageSize: 10,
            }}
          />
        </Card>
      </div>
    )
  }
}

export default ThemeStyle
